<template>
  <div id="app">
    <el-container>
      <el-header style="font-size: 20px" class="header_title">
        <div>
          <a href="/">就爱科技</a>
        </div>
        <div class="1" v-if="IsLogin == 0">
          <el-menu
            class="el-menu-demo"
            mode="horizontal"
            style="background: #9a99c5"
          >
            <el-menu-item index="4" @click="dialogFormVisible = true"
              >登录</el-menu-item
            >
            <el-menu-item index="5" @click="registerFormVisible = true"
              >注册</el-menu-item
            >
          </el-menu>
        </div>
        <div class="2" v-if="IsLogin == 1">
          <el-menu
            class="el-menu-demo"
            mode="horizontal"
            style="background: #9a99c5"
          >
            <el-submenu index="2">
              <template slot="title"
                ><i class="el-icon-user" style="width: 100%">{{
                  nickName
                }}</i></template
              >
              <!-- @click="drawer = true" -->
              <el-menu-item
                index="2-1"
                style="text-align: center; color: #000"
                @click.native="drawers"
                >个人资料</el-menu-item
              >
              <hr />
              <el-menu-item
                index="2-2"
                style="text-align: center; color: #000"
                @click.native="updatepass"
                >修改密码</el-menu-item
              >
              <hr />
              <el-menu-item
                index="2-3"
                style="text-align: center; color: #000"
                @click.native="open"
                >退出</el-menu-item
              >
            </el-submenu>
          </el-menu>
        </div>
      </el-header>

      <!-- 轮播图 -->
      <el-carousel
        :interval="5000"
        type="card"
        height="300px"
        class="carousel_title"
      >
        <el-carousel-item v-for="item in imgs_list" :key="item.id">
          <img :src="localhostPath + item.carouselPicturePath" class="image" />
        </el-carousel-item>
      </el-carousel>

      <!-- 左侧榜单aside -->
      <el-container>
        <el-aside width="250px">
          <el-card>
            <div slot="header" class="clearfix">
              <span>四十八小时阅读排行</span>
              <span>
                <el-button
                  type="text"
                  icon="el-icon-d-arrow-right"
                  @click="lookMore"
                  >更多</el-button
                >
              </span>
            </div>
            <div v-for="o in quatable" :key="o.id" class="text item">
              <div>
                <router-link
                  :to="'/home/newsinfo/' + o.id"
                  style="font-size: 14px"
                >
                  <h5 class="abc" :title="o.articleTitle">
                    {{ o.articleTitle }}
                  </h5>
                </router-link>
                <el-link class="acc">{{ o.articleAuthor }}</el-link>
              </div>
              <hr />
            </div>
          </el-card>

          <el-card>
            <div slot="header" class="clearfix">
              <span>十天编辑推荐</span>
              <span>
                <el-button
                  type="text"
                  icon="el-icon-d-arrow-right"
                  @click="eitMore"
                  >更多</el-button
                >
              </span>
            </div>
            <div v-for="o in editable" :key="o.id" class="text item">
              <div>
                <router-link
                  :to="'/home/newsinfo/' + o.id"
                  style="font-size: 14px"
                >
                  <h5 class="abc" :title="o.articleTitle">
                    {{ o.articleTitle }}
                  </h5>
                </router-link>
                <el-link class="acc">{{ o.articleAuthor }}</el-link>
              </div>
              <hr />
            </div>
          </el-card>
          <el-card>
            <div slot="header" class="clearfix">
              <span>十天排行评论</span>
              <span>
                <el-button
                  type="text"
                  icon="el-icon-d-arrow-right"
                  @click="comMore"
                  >更多</el-button
                >
              </span>
            </div>
            <div v-for="o in comtable" :key="o.id" class="text item">
              <div>
                <router-link
                  :to="'/home/newsinfo/' + o.id"
                  style="font-size: 14px"
                >
                  <h5 class="abc" :title="o.articleTitle">
                    {{ o.articleTitle }}
                  </h5>
                </router-link>
                <el-link class="acc">{{ o.articleAuthor }}</el-link>
              </div>
              <hr />
            </div>
          </el-card>
        </el-aside>

        <!-- 中间 -->
        <el-main style="width: 70rem">
          <router-view></router-view>
        </el-main>
      </el-container>

      <!-- 底部 -->
      <el-footer style="height: 250px">
        <div
          style="margin-right: 70px; width: 150px; height: 200px"
          v-for="item in this.qrCodeList"
          :key="item.id"
        >
          <el-card :body-style="{ padding: '0px' }">
            <img :src="localhostPath + item.qrcodePath" class="image" />
            <div class="clearfix" style="text-align: center">
              <div>
                <h3>扫描{{ item.qrcode }} 关注我们</h3>
              </div>
            </div>
          </el-card>
        </div>

        <div class="div-ul-li" style="margin-left: 60px; font-size: 14px">
          <ul>
            <li>
              <label for="">联系电话：{{ this.webList.telephone }}</label>
            </li>
            <li>
              <label for="">邮箱地址：{{ this.webList.email }}</label>
            </li>
            <li>
              <label for="">公司地址：{{ this.webList.webAddress }}</label>
            </li>
            <li>
              <el-link href="https://beian.miit.gov.cn/"
                >ICP:{{ this.webList.icp }}</el-link
              >
            </li>
            <li>
              <el-link href="http://www.beian.gov.cn/portal/registerSystemInfo">
                <img :src="policeIcon" alt="" />
                {{ this.webList.policeRecord }}
              </el-link>
            </li>
          </ul>
        </div>
      </el-footer>
    </el-container>

    <!-- 登录框 -->
    <el-dialog title="登录" :visible.sync="dialogFormVisible" width="400px">
      <div slot="header" class="clearfix">
        <span>登录</span>
      </div>
      <div class="text item">
        <el-form
          :model="formData"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户名" prop="username">
            <el-input
              type="text"
              v-model="formData.username"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model="formData.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >登录</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>

    <!-- 注册 -->
    <el-dialog title="注册" :visible.sync="registerFormVisible" width="400px">
      <div slot="header" class="clearfix">
        <span>注册</span>
      </div>
      <div class="text item">
        <el-form
          :model="registerData"
          status-icon
          :rules="rule"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户名" prop="username">
            <el-input
              type="text"
              v-model="registerData.username"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model="registerData.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPassword">
            <el-input
              type="password"
              v-model="registerData.checkPassword"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitRegForm('ruleForm')"
              >注册</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <!-- 个人资料 -->
    <el-drawer title="个人名片" :visible.sync="drawer" :direction="direction">
      <div class="sub-title"></div>
      <el-form ref="form1" :model="form1" label-width="80px">
        <el-form-item label="姓名">
          <el-input
            id="inputDeep"
            v-model="form1.nickName"
            type="text"
            placeholder="姓名"
            style="width: 150px"
            maxlength="10"
            show-word-limit
            v-if="seen"
          ></el-input>
          <span v-else>{{ form1.nickName }}</span>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form1.sex" v-if="seen">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
          <span v-else>{{ form1.sex }}</span>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-col :span="11" v-if="seen">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form1.birthday"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
          <span v-else>{{ getDate(form1.birthday) }}</span>
        </el-form-item>

        <el-form-item label="家庭住址">
          <el-input
            type="textarea"
            v-model="form1.address"
            v-if="seen"
          ></el-input>
          <span v-else>{{ form1.address }}</span>
        </el-form-item>

        <el-form-item label="自我介绍">
          <el-input
            type="textarea"
            v-model="form1.selfIntroduction"
            v-if="seen"
          ></el-input>
          <span v-else>{{ form1.selfIntroduction }}</span>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="useredit" v-if="!this.seen">
            编辑</el-button
          >
          <el-button type="primary" @click="usersave" v-else>保存</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <!-- 修改密码 -->
    <el-dialog
      title="修改密码"
      :visible.sync="updatePassFormVisible"
      width="400px"
    >
      <el-form :model="form">
        <el-form-item label="请输入原密码" :label-width="formLabelWidth">
          <el-input
            v-model="form.beforeuserpass"
            autocomplete="off"
            type="text"
          ></el-input>
        </el-form-item>
        <el-form-item label="请输入密码" :label-width="formLabelWidth">
          <el-input
            v-model="form.password"
            autocomplete="off"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item label="请再次输入密码" :label-width="formLabelWidth">
          <el-input
            v-model="form.checkPass"
            autocomplete="off"
            type="password"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updatePassFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getReadFe,
  getTenEdit,
  getTenCom,
  getwebsite,
  getQrCode,
} from "../api/read";
import { getCarousel } from "../api/carousel";
import {
  login,
  register,
  getUserById,
  editUserInfo,
  updateUserPass,
} from "../api/users";
import common from "../uitls/common";
export default {
  name: "App",
  computed: {
    name() {
      var name = localStorage.getItem("username");
      return name;
    },
  },

  data() {
    return {
      policeIcon:require("../assets/q.jpg"),
      localhostPath: common.localhostPath,
      imgs_list: [],
      //是否隐藏登录注册
      IsLogin: 0,
      //阅读排行
      quatable: [],
      //编辑推荐
      editable: [],
      //评论排行
      comtable: [],
      allArticle: [],
      activeName: "second",
      getDate: common.getDate,
      drawer: false,
      innerDrawer: false,
      direction: "rtl",
      circleUrl: "",
      seen: false,
      updatePassFormVisible: false,
      form: {
        beforeuserpass: "",
        password: "",
        checkPass: "",
      },
      form1: {
        nickName: "",
        sex: "",
        birthday: "",
        address: "",
        selfIntroduction: "",
      },

      dialogFormVisible: false,
      //登录
      formData: {
        username: "",
        password: "",
      },
      rules: {
        // required 选择必填 trigger: 'blur' blur失去焦点
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },

      formLabelWidth: "120px",

      //注册
      registerData: {
        username: "",
        password: "",
        checkPassword: "",
      },
      rule: {
        // required 选择必填 trigger: 'blur' blur失去焦点
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        checkPassword: [
          { required: true, message: "请确认密码", trigger: "blur" },
        ],
      },

      registerFormVisible: false,
      qrCodeList: [],
      webList: [],
      nickName :""
    };
  },
  mounted() {
    this.getQuatable();
    this.getQuantEdit();
    this.getQuantCom();
    this.IsAceLogin();
    this.carouselPicture();
    this.getfooter();
    this.nickName = localStorage.getItem("nickname")
  },
  methods: {
    //底部的东西
    getfooter() {
      getwebsite().then(({ data }) => {
        if (data.data == null) {
          this.webList = [];
        } else {
          this.webList = data.data;
        }
      });
      getQrCode().then(({ data }) => {
        if (data.data.length == 0) {
          this.qrCodeList = [];
        } else {
          this.qrCodeList = data.data;
          console.log(this.qrCodeList);
        }
      });
    },
    carouselPicture() {
      getCarousel().then(({ data }) => {
        this.imgs_list = data.data;
      });
    },
    //判断用户是否登录并改变样式（登录，注册按钮消失，暂未实现）
    IsAceLogin() {
      var uId = Number(localStorage.getItem("userId"));
      if (uId == 0) {
        console.log("用户未登录");
      } else {
        this.IsLogin = 1;
        console.log("用户已登录");
      }
    },
    //提交新密码确认按钮事件
    confirm() {
      this.dialogFormVisible = false;
      var id = localStorage.getItem("userId");
      if (
        this.form.password === this.form.checkPass &&
        this.form.password.length > 0 &&
        this.form.checkPass.length > 0
      ) {
        updateUserPass(id, this.form)
          .then(({ data }) => {
            if (data.code === 200) {
              this.$message({ type: "success", message: data.msg });
              // this.form.beforeuserpass='';
              //    this.form.password='';
              //       this.form.checkPass='';
              localStorage.clear();
              location.reload();
            } else {
              this.$message({ type: "error", message: data.msg });
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.$message({
          type: "error",
          message: "请验证二次输入的密码是否一致,且不能为空",
        });
      }
    },
    //修改密码框
    updatepass() {
      this.updatePassFormVisible = true;
    },
    //点击编辑效果
    useredit() {
      this.seen = !this.seen;
      if (this.seen) {
        this.seen = true;
      } else {
        this.seen = false;
      }
    },
    //保存编辑效果并把个人资料传入后端数据库
    usersave() {
      this.form1.birthday = common.getDate(this.form1.birthday);
      var id = localStorage.getItem("userId");
      editUserInfo(id, this.form1).then(({ data }) => {
        console.log(data);
      });

      this.seen = false;
    },
    //个人简介
    drawers() {
      this.drawer = true;
      var Id = localStorage.getItem("userId");
      getUserById(Id).then(({ data }) => {
        this.form1 = data.data;
      });
    },
    //退出
    open() {
      this.$confirm("此操作将退出主页面, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          localStorage.clear();
          location.reload();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消注销",
          });
        });
    },
    //注册
    submitRegForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (
            this.registerData.password.trim() ===
            this.registerData.checkPassword.trim()
          ) {
            register(this.registerData)
              .then(({ data }) => {
                if (data.code === 200) {
                  this.$message({ type: "success", message: data.msg });
                  location.reload();
                } else {
                  this.$message({ type: "error", message: data.msg });
                }
              })
              .catch((err) => {
                console.log(err);
              });
          } else {
            this.$message({
              type: "error",
              message: "请验证二次输入的密码是否一致",
            });
          }
        } else {
          return false;
        }
      });
    },
    //登录
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          login(this.formData)
            .then(({ data }) => {
              console.log(data);
              if (data.code === 200) {
                localStorage.setItem("username", data.data.username);
                localStorage.setItem("userId", data.data.userId);
                localStorage.setItem("nickname",data.data.nickName);
                this.$message({ type: "success", message: data.msg });
                location.reload();
              } else {
                this.$message({ type: "error", message: data.msg });
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          return false;
        }
      });
    },

    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //
    lookMore() {
      this.$router.push("/timemore");
    },
    eitMore() {
      this.$router.push("/eitmore");
    },
    comMore() {
      this.$router.push("/commentmore");
    },
    gohome() {
      this.$router.push(-1);
    },

    //48小时阅读量排行
    // ArticleTypeId
    getQuatable() {
      getReadFe()
        .then(({ data }) => {
          let newarr = data.data;
          if (newarr[0] == null) {
            let obj = {
              articleTitle: "暂无数据更新",
              articleAuthor: "",
            };
            let others = [];
            others.push(obj);
            this.quatable = others;
          } else {
            newarr.sort((old, New) => {
              return New.sumRead - old.sumRead;
            });
            if (newarr.length > 4) {
              let otherarr = [];
              for (let i = 0; i < 4; i++) {
                otherarr.push(newarr[i]);
              }

              this.quatable = otherarr;
            } else {
              this.quatable = newarr;
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //十天编辑推荐的文章
    getQuantEdit() {
      getTenEdit()
        .then(({ data }) => {
          let newarr = data.data;
          if (newarr[0] == null) {
            let obj = {
              articleTitle: "暂无数据更新",
              articleAuthor: "",
            };
            let others = [];
            others.push(obj);
            this.editable = others;
          } else {
            newarr.sort((old, New) => {
              return New.sumRead - old.sumRead;
            });
            if (newarr.length > 4) {
              let otherarr = [];

              for (let i = 0; i < 4; i++) {
                otherarr.push(newarr[i]);
              }

              this.editable = otherarr;
            } else {
              this.editable = newarr;
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //十天评论最多的文章
    getQuantCom() {
      getTenCom()
        .then(({ data }) => {
          let newarr = data.data;
          if (newarr.length == 0) {
            let obj = {
              articleTitle: "暂无数据更新",
              articleAuthor: "",
            };
            let others = [];
            others.push(obj);
            this.comtable = others;
          } else {
            newarr.sort((old, New) => {
              return New.sumCom - old.sumCom;
            });
            if (newarr.length > 4) {
              let otherarr = [];

              for (let i = 0; i < 4; i++) {
                otherarr.push(newarr[i]);
              }

              this.comtable = otherarr;
            } else {
              this.comtable = newarr;
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    edit() {
      this.form.seen = !this.form.seen;
      if (this.form.seen) {
        this.form.seen = true;
      } else {
        this.form.seen = false;
      }
    },
    save() {
      this.form.seen = false;
    },
  },
};
</script>

<style>
#app {
  background: #e3e3e7;
}
/* 文章标题文字溢出隐藏 */
.acc {
  float: right;
}
.abc {
  display: inline-block;
  width: 83px;
  overflow: hidden;
  text-overflow: ellipsis; /*文字溢出的部分隐藏并用省略号代替*/
  white-space: nowrap; /*文本不自动换行*/
}

/* 页面头部代码 */
.el-header {
  background-color: #9a99c5;
  color: #333;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
}

.header_title {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 1000;
}

.sub-title {
  line-height: 60px;
}

.block {
  line-height: 70px;
}

/* 中间  */
.el-main {
  min-height: calc(100vh - 110px);
}

/* jio的 */
.el-footer {
  background-color: #eeeeee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

/* 轮播图的样式 */
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.carousel_title {
  margin-top: 50px;
}

/* 左侧榜单的样式 */

.text {
  font-size: 14px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.el-aside {
  margin-left: 55px;
  padding-top: 20px;
}

.el-aside .el-card {
  margin-bottom: 20px;
}

/* 二维码的样式 */

.bottom {
  margin-top: 70px;
  line-height: 40px;
}

.image {
  width: 100%;
  display: block;
}

/* 去除选中时的底部边框 */
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
  border-bottom: none !important;
}
.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: none !important;
}
.el-menu-item.is-active {
  border-bottom: none !important;
}

.div-ul-li ul li{
  padding-bottom: 20px;
}
</style>